<template lang="html">
  <div>
    <div>
      <Carousel autoplay v-model="carousel" loop :autoplay-speed="4000">
        <CarouselItem v-for="blog in carouselBlogs">
            <div class="layout-carousel">
              <img v-holder="'img=1200x200?size=18px&auto=yes&random=yes&text=' + blog.title"
                class="layout-carousel-img"
                @click="handleBlogDetail(blog.id)" />
            </div>
        </CarouselItem>
      </Carousel>
    </div>
    <Row>
      <Col span="18">
        <div v-if="blogs.length > 0">
          <Card class="card-blog-picture" v-for="blog in blogs">
            <Row>
              <Col :span="18" :style="{paddingRight: '10px'}">
                <div :style="{borderBottom: '1px dashed #ddd', paddingBottom: '3px'}">
                  <div class="inline tc" :style="{marginRight: '16px'}">
                    <Avatar v-if="blog.authorPhotoUrl" size="large" :src="blog.authorPhotoUrl"></Avatar>
                    <Avatar v-else size="large">
                      {{ blog.authorName.substring(0, 1) }}
                    </Avatar>
                    <p class="author-name">{{blog.authorName}}</p>
                  </div>
                  <div class="inline" :style="{verticalAlign: 'top'}">
                    <h5 class="blog-title" @click="handleBlogDetail(blog.id)">{{ blog.title }}</h5>
                    <p :style="{color: '#999', fontSize: '13px', marginTop: '5px'}">
                      <span :style="{marginRight: '20px'}"><Icon type="chatbox"></Icon> {{blog.commentCount}}</span>
                      <span :style="{marginRight: '20px'}">创建于: <span>{{$moment(blog.createTime).format('YYYY/MM/DD HH:mm:ss')}}</span></span>
                    </p>
                  </div>
                </div>
                <div :style="{paddingTop: '10px', color: '#666'}">
                  <div>
                    <span v-html="blog.content.replace(/<.+?>/g, '').substring(0, blog.content.replace(/<.+?>/g, '').length > 300 ? 300 : blog.content.replace(/<.+?>/g, '').length)"></span>
                    <span v-if="blog.content.replace(/<.+?>/g, '').length > 300">...</span>
                    <a @click="handleBlogDetail(blog.id)">查看全文</a>
                  </div>
                </div>
              </Col>
              <Col span="6">
                <img :src="blog.imgs.length > 0 ? blog.imgs[0] : '' " width="100%" :style="{height: '200px', objectFit: 'contain'}" v-holder="'img=225x200?size=10px&align=left&auto=yes&random=yes&text=' + (blog.title.length > 10 ? blog.title.substring(0, 10) + '...' : blog.title)">
              </Col>
            </Row>
          </Card>
        </div>
        <div v-else class="blog-no-data">
          该栏目暂无博文！
        </div>
      </Col>
      <Col span="6" :style="{paddingLeft: '10px', paddingTop: '5px'}">
        <Card :style="{borderRadius: '0px', minHeight: '300px'}">
          <p slot="title"></p>
        </Card>
      </Col>
    </Row>

    <Button v-if="loggedIn" type="primary" shape="circle"
      icon="android-create" size="large" class="icon-write-position"
      @click="handleBlogCreation"
    >
    </Button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import Helper from '../utils/index'
export default {
  data () {
    return {
      carousel: 0,
      carouselBlogs: [],
      categoryId: this.$route.params.categoryId,
      blogs: [],
    }
  },
  computed: {
    ...mapState(['loggedIn'])
  },
  methods: {
    ...mapActions(['getUsernameAndPhotoUrlById', 'queryCommentCountByTargetBlogId']),
    handleBlogDetail (id) {
      this.$router.push({ name: 'BlogDetail', params: { categoryId: this.categoryId, blogId: id }})
    },
    handleBlogCreation () {
      this.$router.push({name: 'BlogCreation'})
    },
    handleBlogListByCategoryId () {
      this.$store.dispatch('blogListAsync', this.categoryId)
        .then(res => {
          console.log(res.data)
          this.blogs = res.data._embedded.blogs
          this.blogs.map(async blog => {
            let {username, photoUrl} = await this.getUsernameAndPhotoUrlById(blog.authorId)
            let count = await this.queryCommentCountByTargetBlogId(blog.id)
            this.$set(blog, 'authorName', username)
            this.$set(blog, 'authorPhotoUrl', photoUrl)
            this.$set(blog, 'commentCount', count)
            this.$set(blog, 'imgs', Helper.findImgSrcInString(blog.content))
          })
        })
        .catch(err => {
          this.$Message.error(err)
          console.log(err)
        })
    },
    handleQueryCarouseBlogs () {
      this.$store.dispatch('queryNewest4')
        .then(res => {
          this.carouselBlogs = res.data._embedded.blogs
          console.log('this.carouselBlogs', this.carouselBlogs)
        })
        .catch(err => {
          console.error('获取推荐博文失败');
        })
    }
  },

  beforeMount () {
    this.handleBlogListByCategoryId()
    this.handleQueryCarouseBlogs()
  }

}
</script>

<style lang="css">
  .background-white{
    background-color: #fff;
  }
  .layout-carousel{
    height: 200px;
    position: relative;
  }
  .layout-carousel-img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 200px;
    cursor: pointer;
  }
  .card-blog-picture{
    margin: 5px auto;
    border-radius: 0px;
  }
  .inline{
    display: inline-block;
  }
  .fl{
    float: left;
  }
  .tc{
    text-align: center;
  }
  .clearfix::after{
    content: "";
    clear: both;
    display: table;
  }
  .author-name{
    font-size: 12px;
    color: #999;
  }
  .blog-title{
    font-size: 18px;
    cursor: pointer;
  }
  .blog-title:hover {
    text-decoration: underline;
  }
  .icon-write-position {
    position: fixed;
    bottom: 50px;
    right: 50px;
  }
  .blog-no-data {
    text-align: center;
    line-height: 200px;
    font-size: 16px;
    background-color: #fff;
  }
</style>
